<%@page import="java.util.ArrayList"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueDate"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueList"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueText"%>
<%@page import="java.util.Collection"%>
<%@page import="com.dilean.spring.AplicationContextHolder"%>
<%@page import="com.dilean.api.dao.PersonDAO"%>
<%@page import="com.dilean.impl.model.PersonImpl"%>
<%@page import="com.dilean.api.model.Person"%>
<%@page import="com.dilean.api.dao.ConversationDAO"%>
<%@page import="com.dilean.api.model.Conversation"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Common Friends &middot; Dilean</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <style>
            .user-row {
                margin-bottom: 14px;
            }
            .user-row:last-child {
                margin-bottom: 0;
            }
            .dropdown-user {
                margin: 13px 0;
                padding: 5px;
                height: 100%;
            }
            .dropdown-user:hover {
                cursor: pointer;
            }
            .table-user-information > tbody > tr {
                border-top: 1px solid rgb(221, 221, 221);
            }
            .table-user-information > tbody > tr:first-child {
                border-top: 0;
            }
            .table-user-information > tbody > tr > td {
                border-top: 0;
            }
            .row{
                margin-top:40px;
                padding: 0 10px;
            }
            .clickable{
                cursor: pointer;   
            }
            .panel-heading div {
                margin-top: -18px;
                font-size: 15px;
            }
            .panel-heading div span{
                margin-left:5px;
            }
            .panel-body{
                display: none;
            }
        </style>
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <link href="resources/mytheme/css/bootstrap.css" rel="stylesheet">
        <link href="resources/mytheme/css/simple-sidebar.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <link href="../resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <script src="../resources/mytheme/js/jquery.bootstrap-duallistbox.js"></script>
        <link href="resources/mytheme/css/font-awesome.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <%

            Person me = new PersonImpl();
            Person myFr = new PersonImpl();
            final int myId = Integer.parseInt(request.getParameter("myId"));
            int myFrId=Integer.parseInt(request.getParameter("frId"));
            //Integer.parseInt(request.getParameter("id"));
            me = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(myId);
            myFr=AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(myFrId);
            Collection<Person> myFriends = me.getFriends();
            Collection<Person> myFrFriends = myFr.getFriends();
            Collection<Person> commonFriends = new ArrayList<Person>();
            
            
            for(Person myFriend : myFriends){
                for(Person myFrDriend : myFrFriends){
                    
                    if(myFriend.getId()==myFrDriend.getId()){
                        commonFriends.add(myFriend);
                    }
                }
            }

            AttrValueText firstName;
            AttrValueText lastName;
            AttrValueText status;
            AttrValueList gender;
            AttrValueList relStatus;
            AttrValueList univercity;
            AttrValueDate regDate;
            

        %>
        <div id="wrapper">
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="http://localhost:8080/Dilean/myPage.jsp">
                            <h2 align="centre" >Dilean</h2>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/myPage.jsp"><i class="fa fa-home fa-fw-5x"></i>&nbsp; My Page</a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/friends.jsp"><i class="fa fa-child"></i>&nbsp; Friends <span class="badge badge-info">4</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope"></i>&nbsp; Messages <span class="badge badge-info">4</span></a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="http://localhost:8080/Dilean/editUser.jsp?id=1"><i class="fa fa-cog"></i>&nbsp; Settings</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-pencil fa-fw-5x"></i>&nbsp; About</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sign-out"></i>&nbsp; LogOut</a>
                    </li>
                </ul>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-large btn-primary" href="#menu-toggle" id="menu-toggle" >
                                <i class="fa fa-user fa-3x"></i> <h4>User Menu</h4></a>


                            <div class="container">
                                <h1>Common Users</h1>
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">Users</h3>
                                                <div class="pull-right">
                                                    <span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body">
                                                        <i class="fa fa-search"> Filter</i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="panel-body">
                                                <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Users" />
                                            </div>
                                            <table class="table table-hover" id="dev-table">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Full Name</th>
                                                        
                                                        <th>Gender</th>
                                                        <th>Univercity</th>
                                                        <th>Registration Date</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <%      int num=1;                                                  
                                                            for (Person friend : commonFriends) {
                                                            int id = friend.getId();
                                                            firstName = friend.getAttributeValue(1, AttrValueText.class);
                                                            lastName = friend.getAttributeValue(2, AttrValueText.class);
                                                           
                                                            gender = friend.getAttributeValue(6, AttrValueList.class);
                                                           
                                                            univercity = friend.getAttributeValue(9, AttrValueList.class);
                                                            regDate = friend.getAttributeValue(11, AttrValueDate.class);

                                                            String fullname = "User #" + id;

                                                            if ((firstName != null) && (lastName != null)) {
                                                                fullname = firstName.getValue() + " " + lastName.getValue();
                                                            } else if ((firstName == null) && (lastName != null)) {
                                                                fullname = lastName.getValue();
                                                            } else if ((firstName != null) && (lastName == null)) {
                                                                fullname = firstName.getValue();
                                                            }
                                                    %>

                                                    <tr>
                                                        <td><%=num %></td>
                                                        <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=id%>"><%=fullname %></a></td>
                                                        
                                                        <td><%= gender.getValue().getName()%></td>
                                                        <td><%= univercity.getValue().getName()%></td>
                                                        <td><%=regDate.getDataStr() %></td>
                                                    </tr>

                                                    <%
                                                    num++;
                                                        }
                                                    %>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>



                            </div>
                            <!-- /#wrapper -->
                            <!-- Menu Toggle Script -->
                            <script>
                                $("#menu-toggle").click(function(e) {
                                    e.preventDefault();
                                    $("#wrapper").toggleClass("toggled");
                                });




                                /**
                                 *   I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables 
                                 *   but will likely encounter performance issues on larger tables.
                                 *
                                 *		<input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
                                 *		$(input-element).filterTable()
                                 *		
                                 *	The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"'
                                 */
                                (function() {
                                    'use strict';
                                    var $ = jQuery;
                                    $.fn.extend({
                                        filterTable: function() {
                                            return this.each(function() {
                                                $(this).on('keyup', function(e) {
                                                    $('.filterTable_no_results').remove();
                                                    var $this = $(this), search = $this.val().toLowerCase(), target = $this.attr('data-filters'), $target = $(target), $rows = $target.find('tbody tr');
                                                    if (search == '') {
                                                        $rows.show();
                                                    } else {
                                                        $rows.each(function() {
                                                            var $this = $(this);
                                                            $this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
                                                        })
                                                        if ($target.find('tbody tr:visible').size() === 0) {
                                                            var col_count = $target.find('tr').first().find('td').size();
                                                            var no_results = $('<tr class="filterTable_no_results"><td colspan="' + col_count + '">No results found</td></tr>')
                                                            $target.find('tbody').append(no_results);
                                                        }
                                                    }
                                                });
                                            });
                                        }
                                    });
                                    $('[data-action="filter"]').filterTable();
                                })(jQuery);

                                $(function() {
                                    // attach table filter plugin to inputs
                                    $('[data-action="filter"]').filterTable();

                                    $('.container').on('click', '.panel-heading span.filter', function(e) {
                                        var $this = $(this),
                                                $panel = $this.parents('.panel');

                                        $panel.find('.panel-body').slideToggle();
                                        if ($this.css('display') != 'none') {
                                            $panel.find('.panel-body input').focus();
                                        }
                                    });
                                    $('[data-toggle="tooltip"]').tooltip();
                                })
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
